<template>
	<div> 
			<a-button type="plain" size="small" @click="$_zoomIn">放大</a-button>
			<a-button type="plain" size="small" @click="$_zoomOut">缩小</a-button>
			<a-button type="plain" size="small" @click="$_showMiniMap">查看缩略图</a-button>
			<!-- <a-button type="plain" size="small" @click="$_zoomReset">大小适应</a-button>
			<a-button type="plain" size="small" @click="$_translateRest">定位还原</a-button>
			<a-button type="plain" size="small" @click="$_reset">还原(大小&定位)</a-button> -->
		<!-- 	<a-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</a-button>
			<a-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</a-button> -->
		<!-- 	<a-button type="plain" size="small" @click="$_download">下载图片</a-button> -->
			<!-- <a-button type="plain" size="small" @click="$_catData">查看数据</a-button> 
			<a-button type="plain" size="small" @click="$_downloadBpmn">导出BPMN数据</a-button>
			<a-button type="plain" size="small" @click="$_showMiniMap">查看缩略图</a-button>
			<a-button type="plain" size="small" @click="$_dagre">一键布局</a-button>
			
			<a-button type="plain" size="small" @click="$_xmltoJson">XMLtoJSON</a-button>  -->
	</div>
</template>
<script setup lang="ts">
	import {lfJson2Xml,lfXml2Json,BpmnAdapter,toNormalJson} from "@logicflow/extension";
	import {defineComponent,reactive,toRaw,ref,onMounted,nextTick} from 'vue';

	//import { lfJson2Xml, lfXml2Json } from "@logicflow/extension";
	
	const props = defineProps<{ 
		lf: any,
	}>()
	
	
	const emit = defineEmits(['catData'])
	
	const undoDisable = ref<boolean>(true)
	const redoDisable = ref<boolean>(true)
	const graphData = ref<any>(null)
	const dataVisible = ref<boolean>(false)
	
	 
	

	
	
	
		const $_zoomIn = ()=>{
			props.lf.zoom(true);
		}
		const $_zoomOut = ()=>{
			props.lf.zoom(false);
		}
		const $_zoomReset = ()=>{
			props.lf.resetZoom();
		}
		const $_translateRest = ()=>{
			props.lf.resetTranslate();
		}
		const $_reset = ()=>{
			props.lf.resetZoom();
			props.lf.resetTranslate();
		}
		const $_undo = ()=>{
			props.lf.undo();
		}
		const $_redo = ()=>{
			props.lf.redo();
		}
		const $_download = ()=>{
			props.lf.getSnapshot();
		}
		const $_catData = ()=>{
			emit('catData');
		}
		const $_downloadBpmn = ()=>{  
				const outData = (BpmnAdapter as any).adapterOut(props.lf.getGraphData())
				download("logicflow.xml", lfJson2Xml(outData)); 
				// const outData = props.lf.getGraphData()
				// download("logicflow.xml", lfJson2Xml(outData)); 
		
		}
	 
		const $_showMiniMap = ()=>{
			const {
				lf
			} = props;
			lf.extension.miniMap.show(lf.graphModel.width - 150, 40)
		}
		const download = (filename, text) =>{
			console.log(filename, text);
			var element = document.createElement("a");
			element.setAttribute(
				"href",
				"data:text/plain;charset=utf-8," + encodeURIComponent(text)
			);
			element.setAttribute("download", filename);
	
			element.style.display = "none";
			document.body.appendChild(element);
	
			element.click();
	
			document.body.removeChild(element);
		}
		const $_dagre= ()=>{
			props.lf.extension.dagre.layout({
				nodesep: 20,
				ranksep: 20,
			});
		}
		
		const $_xmltoJson= ()=>{
			let xml = "\t\n<bpmn:definitions id=\"Definitions_2trfsvb\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:ssbi=\"http://www.omg.org/bpmn\"  xmlns:bpmn=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" targetNamespace=\"http://bpmn.io/schema/bpmn\" exporter=\"bpmn-js (https://demo.bpmn.io)\" exporterVersion=\"7.3.0\">\t\n  <bpmn:process id=\"Process_1inrc9m\" isExecutable=\"true\">\t\n    <bpmn:startEvent id=\"ssbi-f3e1d89b-d10a-47fb-9ba0-21d5ba27c662\" name=\"发起人\" ssbi:customAttr=\"{'formPermissions':[{'id':1,'name':'检查事项','operate':0},{'id':2,'name':'日期','key':'readonly','operate':0},{'id':3,'name':'温度','operate':0},{'id':4,'name':'检查结果','operate':0},{'id':5,'name':'备注','operate':0}],'basicSetting':{'name':'','roles':['2'],'depts':[],'users':[],'rolesName':['张老师2']}}\">\t\n      <bpmn:outgoing>ssbi-a4ce9875-3e52-4d5b-8cbe-4e4a530b67e5</bpmn:outgoing>\t\n    </bpmn:startEvent>\t\n    <bpmn:userTask id=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\" name=\"审批人\" ssbi:customAttr=\"{'formPermissions':[{'id':1,'name':'检查事项','operate':0},{'id':2,'name':'日期','key':'readonly','operate':1},{'id':3,'name':'温度','operate':1},{'id':4,'name':'检查结果','operate':1},{'id':5,'name':'备注','operate':2}],'basicSetting':{'name':'','assignmentType':1,'roles':['1','2','3'],'depts':[],'users':[],'approvalType':1,'defaultStrategy':{'type':1,'candidateUser':'1'},'rolesName':['张老师1','张老师2','张老师3']}}\">\t\n      <bpmn:incoming>ssbi-a4ce9875-3e52-4d5b-8cbe-4e4a530b67e5</bpmn:incoming>\t\n      \t\n        <bpmn:outgoing>ssbi-8cff2235-3f5d-4fa4-8e05-413c33b34c50</bpmn:outgoing>\t\n      \t\n        <bpmn:outgoing>ssbi-4abbed71-4bb3-4e33-85ed-c96126491466</bpmn:outgoing>\t\n      \t\n        <bpmn:outgoing>ssbi-3744ea9f-5373-4172-8031-2667e2009482</bpmn:outgoing>\t\n   <bpmn:multiInstanceLoopCharacteristics isSequential=\"false\" />\t\n  </bpmn:userTask>\t\n    \t\n      <bpmn:condition id=\"ssbi-f804f189-09c9-4af2-9fdb-109b72d901f5\">\t\n        <bpmn:incoming>ssbi-4abbed71-4bb3-4e33-85ed-c96126491466</bpmn:incoming>\t\n        <bpmn:outgoing>ssbi-856ced73-8a1e-47fb-bef5-bd64de48c542</bpmn:outgoing>\t\n      </bpmn:condition>\t\n    \t\n      <bpmn:condition id=\"ssbi-73116a9e-d3f2-4082-adc0-50b631b69cc4\">\t\n        <bpmn:incoming>ssbi-8cff2235-3f5d-4fa4-8e05-413c33b34c50</bpmn:incoming>\t\n        <bpmn:outgoing>ssbi-12a96728-d986-443c-a6d2-e2a81af57882</bpmn:outgoing>\t\n      </bpmn:condition>\t\n    \t\n      <bpmn:condition id=\"ssbi-7851c535-01c3-4bb8-b43b-5c312240077c\">\t\n        <bpmn:incoming>ssbi-3744ea9f-5373-4172-8031-2667e2009482</bpmn:incoming>\t\n        <bpmn:outgoing>ssbi-84cbc957-700d-41e8-bd31-223c84d5e4a8</bpmn:outgoing>\t\n      </bpmn:condition>\t\n    <bpmn:performTasks id=\"ssbi-437829e5-7dfc-4450-960c-3ab48ea95eae\">\t\n      <bpmn:incoming>ssbi-856ced73-8a1e-47fb-bef5-bd64de48c542</bpmn:incoming>\t\n      <bpmn:outgoing>ssbi-7027f51d-b084-44db-9091-36db11690b6d</bpmn:outgoing>\t\n    </bpmn:performTasks>\t\n    <bpmn:ccTo id=\"ssbi-05722e1a-720d-4467-af9b-89ce40cff2aa\">\t\n      <bpmn:incoming>ssbi-12a96728-d986-443c-a6d2-e2a81af57882</bpmn:incoming>\t\n      <bpmn:outgoing>ssbi-8014df0b-56d8-4c70-a023-037754817ae6</bpmn:outgoing>\t\n    </bpmn:ccTo>\t\n    <bpmn:endEvent id=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec\">\t\n      \t\n        <bpmn:incoming>ssbi-84cbc957-700d-41e8-bd31-223c84d5e4a8</bpmn:incoming>\t\n      \t\n        <bpmn:incoming>ssbi-8014df0b-56d8-4c70-a023-037754817ae6</bpmn:incoming>\t\n      \t\n        <bpmn:incoming>ssbi-7027f51d-b084-44db-9091-36db11690b6d</bpmn:incoming>\t\n    </bpmn:endEvent>\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-a4ce9875-3e52-4d5b-8cbe-4e4a530b67e5\" sourceRef=\"ssbi-f3e1d89b-d10a-47fb-9ba0-21d5ba27c662\" targetRef=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-8cff2235-3f5d-4fa4-8e05-413c33b34c50\" sourceRef=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\" targetRef=\"ssbi-73116a9e-d3f2-4082-adc0-50b631b69cc4\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-4abbed71-4bb3-4e33-85ed-c96126491466\" sourceRef=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\" targetRef=\"ssbi-f804f189-09c9-4af2-9fdb-109b72d901f5\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-3744ea9f-5373-4172-8031-2667e2009482\" sourceRef=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\" targetRef=\"ssbi-7851c535-01c3-4bb8-b43b-5c312240077c\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-12a96728-d986-443c-a6d2-e2a81af57882\" sourceRef=\"ssbi-73116a9e-d3f2-4082-adc0-50b631b69cc4\" targetRef=\"ssbi-05722e1a-720d-4467-af9b-89ce40cff2aa\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-856ced73-8a1e-47fb-bef5-bd64de48c542\" sourceRef=\"ssbi-f804f189-09c9-4af2-9fdb-109b72d901f5\" targetRef=\"ssbi-437829e5-7dfc-4450-960c-3ab48ea95eae\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-84cbc957-700d-41e8-bd31-223c84d5e4a8\" sourceRef=\"ssbi-7851c535-01c3-4bb8-b43b-5c312240077c\" targetRef=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-8014df0b-56d8-4c70-a023-037754817ae6\" sourceRef=\"ssbi-05722e1a-720d-4467-af9b-89ce40cff2aa\" targetRef=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec\" />\t\n    \t\n      <bpmn:sequenceFlow id=\"ssbi-7027f51d-b084-44db-9091-36db11690b6d\" sourceRef=\"ssbi-437829e5-7dfc-4450-960c-3ab48ea95eae\" targetRef=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec\" />\t\n  </bpmn:process>\t\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_1\">\t\n    <bpmndi:BPMNPlane id=\"BPMNPlane_1\" bpmnElement=\"Process_1inrc9m\">\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-a4ce9875-3e52-4d5b-8cbe-4e4a530b67e5_di\" bpmnElement=\"ssbi-a4ce9875-3e52-4d5b-8cbe-4e4a530b67e5\">\t\n          \t\n            <di:waypoint x=\"521\" y=\"128\" />\t\n          \t\n            <di:waypoint x=\"521\" y=\"188\" />\t\n          \t\n            <di:waypoint x=\"577\" y=\"188\" />\t\n          \t\n            <di:waypoint x=\"577\" y=\"142\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"142\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"172\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-8cff2235-3f5d-4fa4-8e05-413c33b34c50_di\" bpmnElement=\"ssbi-8cff2235-3f5d-4fa4-8e05-413c33b34c50\">\t\n          \t\n            <di:waypoint x=\"633\" y=\"272\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"302\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"302\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"297\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"297\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"327\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-4abbed71-4bb3-4e33-85ed-c96126491466_di\" bpmnElement=\"ssbi-4abbed71-4bb3-4e33-85ed-c96126491466\">\t\n          \t\n            <di:waypoint x=\"633\" y=\"272\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"303\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"303\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"333\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-3744ea9f-5373-4172-8031-2667e2009482_di\" bpmnElement=\"ssbi-3744ea9f-5373-4172-8031-2667e2009482\">\t\n          \t\n            <di:waypoint x=\"633\" y=\"272\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"302\" />\t\n          \t\n            <di:waypoint x=\"903\" y=\"302\" />\t\n          \t\n            <di:waypoint x=\"903\" y=\"332\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-12a96728-d986-443c-a6d2-e2a81af57882_di\" bpmnElement=\"ssbi-12a96728-d986-443c-a6d2-e2a81af57882\">\t\n          \t\n            <di:waypoint x=\"633\" y=\"427\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"488\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-856ced73-8a1e-47fb-bef5-bd64de48c542_di\" bpmnElement=\"ssbi-856ced73-8a1e-47fb-bef5-bd64de48c542\">\t\n          \t\n            <di:waypoint x=\"384\" y=\"433\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"463\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"463\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"459\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"459\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"489\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-84cbc957-700d-41e8-bd31-223c84d5e4a8_di\" bpmnElement=\"ssbi-84cbc957-700d-41e8-bd31-223c84d5e4a8\">\t\n          \t\n            <di:waypoint x=\"903\" y=\"432\" />\t\n          \t\n            <di:waypoint x=\"903\" y=\"630\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"630\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"660\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-8014df0b-56d8-4c70-a023-037754817ae6_di\" bpmnElement=\"ssbi-8014df0b-56d8-4c70-a023-037754817ae6\">\t\n          \t\n            <di:waypoint x=\"633\" y=\"588\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"660\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNEdge id=\"ssbi-7027f51d-b084-44db-9091-36db11690b6d_di\" bpmnElement=\"ssbi-7027f51d-b084-44db-9091-36db11690b6d\">\t\n          \t\n            <di:waypoint x=\"384\" y=\"589\" />\t\n          \t\n            <di:waypoint x=\"384\" y=\"630\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"630\" />\t\n          \t\n            <di:waypoint x=\"633\" y=\"660\" />\t\n        </bpmndi:BPMNEdge>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-f3e1d89b-d10a-47fb-9ba0-21d5ba27c662_di\" bpmnElement=\"ssbi-f3e1d89b-d10a-47fb-9ba0-21d5ba27c662\">\t\n          <dc:Bounds x=\"501\" y=\"88\" width=\"40\" height=\"40\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d_di\" bpmnElement=\"ssbi-db07aa71-429b-4daa-ad8c-8351ab91b85d\">\t\n          <dc:Bounds x=\"583\" y=\"182\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-f804f189-09c9-4af2-9fdb-109b72d901f5_di\" bpmnElement=\"ssbi-f804f189-09c9-4af2-9fdb-109b72d901f5\">\t\n          <dc:Bounds x=\"334\" y=\"343\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-73116a9e-d3f2-4082-adc0-50b631b69cc4_di\" bpmnElement=\"ssbi-73116a9e-d3f2-4082-adc0-50b631b69cc4\">\t\n          <dc:Bounds x=\"583\" y=\"337\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-7851c535-01c3-4bb8-b43b-5c312240077c_di\" bpmnElement=\"ssbi-7851c535-01c3-4bb8-b43b-5c312240077c\">\t\n          <dc:Bounds x=\"853\" y=\"342\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-437829e5-7dfc-4450-960c-3ab48ea95eae_di\" bpmnElement=\"ssbi-437829e5-7dfc-4450-960c-3ab48ea95eae\">\t\n          <dc:Bounds x=\"334\" y=\"499\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-05722e1a-720d-4467-af9b-89ce40cff2aa_di\" bpmnElement=\"ssbi-05722e1a-720d-4467-af9b-89ce40cff2aa\">\t\n          <dc:Bounds x=\"583\" y=\"498\" width=\"100\" height=\"80\" />\t\n        </bpmndi:BPMNShape>\t\n      \t\n        <bpmndi:BPMNShape id=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec_di\" bpmnElement=\"ssbi-d8fd8c40-aa8e-4142-a081-a43eda76e4ec\">\t\n          <dc:Bounds x=\"613\" y=\"660\" width=\"40\" height=\"40\" />\t\n        </bpmndi:BPMNShape>\t\n    </bpmndi:BPMNPlane>\t\n  </bpmndi:BPMNDiagram>\t\n</bpmn:definitions>"
			console.log('lfXml2Json',lfXml2Json(xml)) 
			console.log(toNormalJson(lfXml2Json(xml)),'------');
			
			// console.log('lfXml2Json',(BpmnAdapter as any).adapterIn(lfXml2Json(xml)))
		}
		
		
		onMounted(() => {
			nextTick(() => {
				 // props.lf.on('history:change', ({
				 // 	data: {
				 // 		undoAble,
				 // 		redoAble
				 // 	}
				 // }) => {
				 // 	undoDisable.value = !undoAble
				 // 	redoDisable.value = !redoAble
				 // });
			});
		});
 
</script>
<style lang="less" scoped>
</style>
